<template>
  <a-modal
    title="高级搜索"
    :visible="dialogVisible"
    okText="确认"
    cancelText="取消"
    :width="'520px'"
    :confirmLoading="loading"
    @ok="handleSure"
    @cancel="() => { $emit('cancel'); }"
  >
    <slot></slot>
    <a-form-model :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="用户名" prop="userName">
        <a-input v-model="queryParam.userName" placeholder="请输入用户名" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="手机号码">
        <a-input v-model="queryParam.phonenumber" placeholder="请输入手机号码" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="邮箱">
        <a-input v-model="queryParam.email" placeholder="请输入邮箱" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="用户状态" prop="selectStatus">
        <a-select
          v-model="queryParam.selectStatus"
          allow-clear
          label-in-value
          style="width: 100%"
          placeholder="请选择人员状态"
          @change="statusHandleChange"
        >
          <a-select-option v-for="item in statusOptions" :key="item.dictValue">
            {{ item.dictLabel }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="性别" prop="selectSex">
        <a-select
          v-model="queryParam.selectSex"
          allow-clear
          label-in-value
          style="width: 100%"
          placeholder="请选择性别"
          @change="sexHandleChange"
        >
          <a-select-option v-for="item in sexOptions" :key="item.dictValue">
            {{ item.dictLabel }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="创建时间">
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['开始时间', '结束时间']"
          @change="createTimeChange"
        />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  name: 'searchTool',
  props: {
    dialogVisible: Boolean,
    statusOptions: Array
  },
  components: {},
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      loading: false,
      sexOptions: [],
      queryParam: {
        params: {
          beginTime: '',
          endTime: ''
        }
      }
    };
  },
  mounted() {
    this.getDicts('sys_user_sex').then(response => {
      this.sexOptions = response.data
    })
  },
  methods: {
    createTimeChange(d1, d2) {
      this.queryParam.params.beginTime = d2[0];
      this.queryParam.params.endTime = d2[1];
    },
    statusHandleChange(value) {
      this.queryParam.status = value.key;
    },
    sexHandleChange(value) {
      this.queryParam.sex = value.key;
    },
    handleSure() {
      this.$emit('searchToolOk', this.queryParam);
    }
  }
};
</script>
<style scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ant-form-item {
  margin-bottom: 10px;
}
</style>
